<template>
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20" class="filter-container">
        <el-col :span="13">
          <el-breadcrumb separator="">
            <el-breadcrumb-item to="/dashboard"><i
              class="el-icon-arrow-left"
              style="cursor: pointer;"
            >返回</i></el-breadcrumb-item>
            <!-- <el-breadcrumb-item>软件库/</el-breadcrumb-item>
            <el-breadcrumb-item v-if="$route.query.software != 'up'">软件详情</el-breadcrumb-item>
            <el-breadcrumb-item v-else>已安装软件详情</el-breadcrumb-item> -->
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row class="margin-top20">
        <el-col :span="22" :offset="1">
          <el-row>
            <el-col :span="21">
              <el-image
                style="width: 48px; height: 48px;margin-right: 10px; float:left"
                src="https://image.yxgd2020.itislevel.com/group1/M00/00/11/wKgAH18OQk-AS_njAABk1HK8-VI982.png"
                fit="fit"
              />
              <label>应用名称</label><br>
              <span>版本:&nbsp;2.0</span>
              <el-divider direction="vertical" />
              <span>大小:&nbsp;2.0G</span>
              <el-divider direction="vertical" />
              <span>更新:&nbsp;2020-07-22</span><br>
              <el-tag type="success" size="mini"><svg-icon icon-class="ico_安全认证" />安全认证</el-tag>&nbsp;
              <el-tag size="mini"><svg-icon icon-class="ico_正式版" />正式版</el-tag>&nbsp;
              <el-tag type="danger" size="mini"><svg-icon icon-class="ico_无插件" />无插件</el-tag>
            </el-col>
            <el-col :span="3" :offset="0" style="text-align: right;">
              <el-button v-if="$route.query.software == 'up'" plain size="mini">卸载</el-button>
              <el-button v-else type="primary" size="mini">安装</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="22" :offset="1" class="margin-top20">
          <div class="lineBanner">
            <swiper v-if="imgList.length>0" ref="mySwiper" :options="swiperOptionMultiple">
              <swiper-slide v-for="(item, index) in imgList" :key="index">
                <div class="campusList">
                  <img :src="item.imgUrl" :title="item.id" style="width: 100%;height:250px">
                <!-- <p>{{item.detail}}</p>
                                <label>{{item.peopleCount}}</label> -->
                </div>
              </swiper-slide>
              <!-- <div slot="button-prev" class="swiper-button-prev" /> -->
              <!-- <div slot="button-next" class="swiper-button-next" /> -->
            </swiper>
          </div>
        <!-- <el-carousel :interval="4000" type="card" height="250px">
          <el-carousel-item v-for="item in 6" :key="item" />
        </el-carousel> -->
        </el-col>
        <el-col
          :span="1"
          calss="right-icons"
          style="
            height: 260px;
          opacity: .35;
            font-size: 43px;
          padding-top: 130px;"
        ><i class="el-icon-arrow-right" /></el-col>
        <el-col :span="22" :offset="1" class="margin-top20">
          <span><b>软件介绍</b></span>
          <p>腾讯官方出品，基于chromium内核开发，启动速度，打开网页速度，更快的浏览器。可以安装Chrome的扩展，还有微信等众多优质扩展。支持QQ快捷登录，登录浏览器后即可自动登录腾讯系网页。</p>
        </el-col>
        <el-col :span="23" :offset="1" class="margin-top20">
          <span><b>使用情况</b></span>
          <p>xxx/xxx/xxx/ 正在使用</p>
        </el-col>
        <el-col :span="23" :offset="1" class="margin-top20">
          <span><b>我的秘钥</b></span>
          <p />
          <!-- <el-button type="primary" size="mini"><i class="el-icon-key" />申请秘钥</el-button> <svg-icon icon-class="ico_申请" />-->
          <!-- <el-button type="primary" size="mini"><i class="el-icon-loading" />申请秘钥中</el-button> -->
          <el-form :inline="true" size="mini">
            <el-input disabled class="el-input-width" size="mini" />
            <el-button type="text" class="margin-left10" size="mini" @click.prevent="removeDomain(domain)">
              复制
            </el-button>
            <el-button type="danger" class="margin-left10" size="mini" @click.prevent="removeDomain(domain)">
              回收秘钥
            </el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      imgList: [{
        id: '001',
        imgUrl: require('../../assets/images/登录背景.webp')
      },
      {
        id: '002',
        imgUrl: require('../../assets/images/登录背景.webp')
      },
      {
        id: '003',
        imgUrl: require('../../assets/images/登录背景.webp')
      },
      {
        id: '004',
        imgUrl: require('../../assets/images/登录背景.webp')
      }
      ],
      swiperOptionMultiple: {
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: true,
          disableOnInteraction: false,
          watchSlidesVisibility: true
        },
        slidesPerView: 3,
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next'
          // prevEl: '.swiper-button-prev'
        },
        on: {
          tap: function(e) {
          }
        }
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style>
  .margin-left10 {
    margin-left: 10px;
  }
  .el-upload-dragger{
      width: 260px  !important;
  }
</style>
<style lang="scss" scoped>
  .right-icons {
      height: 260px !important;
      opacity: .45 !important;
      font-size: 53 !important;
      padding-top: 130px !important;
  }
  .container {
      padding-top: 13px;
      background-color: #ffffff !important;
    }
  .lineBanner {
        box-sizing: border-box;
        padding: 10px;

        .campusList {
            P {
                margin-block-start: 0;
                margin-block-end: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #303133;
                font-size: 14px;
            }

            label {
                color: #409EFF;
                font-size: 14px;
            }
        }
    }
  .el-carousel__item {
    background-size: cover; -moz-background-size: cover;
    /* color: #475669; */
    /* font-size: 14px; */
    opacity: 0.75;
    background-image: url('https://image.yxgd2020.itislevel.com/group1/M00/00/11/wKgAH18OQk-AS_njAABk1HK8-VI982.png');
    /* line-height: 250px; */
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-upload-dragger{
      width: 260px  !important;
  }
  .el-upload{
    width:280px !important;
  }
  .el-upload {
    width:280px;
  }
  .el-textarea {
    width: 280px;
    height: 122px;
  }
  .margin-top20 {
    margin-top: 20px;
  }
  .el-input{
    width: 280px;
    height: 48px;
  }
  .el-select {
    width: 280px;
    height: 48px;
  }
</style>
